<template>
  <div class="alarm-source">
    <custom-title name="告警来源" v-if="!hiddenTitle"></custom-title>
    <div class="content" :class="{ 'single-column': isSingleColumn }">
      <!-- warningSource 1-AI上报 2-人工上报 3-一键告警 4-摄像机告警 9-卫星告警 10-雷达告警 8-物联设备告警 11-第三方告警 -->
      <template v-if="orderData.warningSource === '9'">
        <!-- 耕地卫片执法: 4110101, 矿产卫片执法: 4110102 非农化卫片执法: 4110103 非粮化卫片执法: 4110104 -->
        <template v-if="weipianList.includes(orderData.warningTypeId)">
          <alarm-row
            v-if="
              orderData.warningTypeId == '4110101' ||
              orderData.warningTypeId == '4110102'
            "
            label="图斑编号："
            :value="orderData.spot?.spotNo"
          />
          <alarm-row label="城市名：" :value="orderData.spot?.cityName" />
          <alarm-row label="区县名：" :value="orderData.spot?.countyName" />
          <alarm-row label="乡镇街道：" :value="orderData.spot?.townName" />
          <alarm-row label="村：" :value="orderData.spot?.villageName || '-'" />
          <template
            v-if="
              orderData.warningTypeId == '4110101' ||
              orderData.warningTypeId == '4110102'
            "
          >
            <alarm-row
              label="卫片来源："
              :value="orderData.spot?.regionSource"
            />
            <template v-if="orderData.warningTypeId == '4110101'">
              <alarm-row label="前类型：" :value="orderData.spot?.preType" />
              <alarm-row label="后类型：" :value="orderData.spot?.postType" />
              <alarm-row
                label="前时相："
                :value="orderData.spot?.preChronology"
              />
              <alarm-row
                label="后时相："
                :value="orderData.spot?.postChronology"
              />
            </template>
            <alarm-row label="图斑面积：" :value="orderData.spot?.spotArea" />
            <alarm-row
              label="图斑周长："
              :value="orderData.spot?.spotPerimeter"
            />
          </template>
          <template
            v-if="
              orderData.warningTypeId == '4110103' ||
              orderData.warningTypeId == '4110104'
            "
          >
            <alarm-row label="变化类型：" :value="orderData.spot?.changeType" />
            <alarm-row label="面积：" :value="orderData.spot?.area" />
            <alarm-row
              label="土地利用类型："
              :value="orderData.spot?.landUseType || '-'"
            />
            <alarm-row label="影像时间：" :value="orderData.spot?.imageTime" />
            <alarm-row
              label="是否已质检："
              :value="orderData.spot?.detectionFlag || '-'"
            />
          </template>
        </template>
        <template v-else>
          <alarm-row label="卫星：" :value="orderData.deviceName" />
          <alarm-row
            label="下垫面类型："
            :value="extraField.underlyingSurfaceType"
          />
          <alarm-row label="火区面积：" :value="extraField.fireArea" />
          <alarm-row label="置信度：" :value="confidenceDegree" />
          <AlarmSopurceCamera
            v-for="(item, i) in orderData.satelliteDeviceList"
            :key="i"
            :showCollect="showCollect"
            :device="item"
            :deviceCodeCollect.sync="item.deviceCodeCollect"
          />
        </template>
      </template>
      <!-- 人工上报 -->
      <template v-if="['2'].includes(orderData.warningSource)">
        <alarm-row label="告警人员：" :value="orderData.findName" />
        <alarm-row label="联系方式：" :value="orderData.findMobile" />
      </template>
      <!-- 雷达告警 -->
      <template v-if="orderData.warningSource === '10'">
        <div
          class="content"
          v-for="(item, index) in orderData.deviceSiteList"
          :key="index"
        >
          <alarm-row label="雷达编号：" :value="item.deviceCode" />
          <alarm-row label="雷达名称：" :value="item.deviceName" />
          <alarm-row
            label="雷达经纬度："
            :value="getLngLat(item.longitude, item.latitude)"
          />
          <alarm-row label="雷达厂家：" :value="item.modelName" />
          <alarm-row label="雷达地址：" :value="item.location" is-single />
        </div>
        <AlarmSopurceCamera
          v-if="orderData.radarDevice?.deviceCode"
          :device="orderData.radarDevice"
          :deviceCodeCollect.sync="orderData.deviceCodeCollect"
          :showCollect="showCollect"
        />
      </template>
      <!-- 物联设备告警 -->
      <template v-if="orderData.warningSource === '8'">
        <alarm-row label="物联设备编号：" :value="orderData.deviceCode" />
        <alarm-row label="物联设备名称：" :value="orderData.deviceName" />
        <alarm-row label="物联设备厂家：" :value="orderData.modelFactoryName" />
        <alarm-row label="物联设备型号：" :value="orderData.deviceModelCode" />
        <alarm-row
          label="物联设备经纬度："
          :value="getLngLat(orderData.videoLongitude, orderData.videoLatitude)"
          isSingle
        />
        <alarm-row
          label="物联设备地址："
          :value="orderData.deviceAddress || orderData.address"
          isSingle
        />
        <template v-for="(devItem, index) in orderData.iotDeviceList">
          <AlarmSopurceCamera
            :key="index"
            v-if="devItem?.deviceCode"
            :device="devItem"
            :deviceCodeCollect.sync="devItem.deviceCodeCollect"
            :showCollect="showCollect"
          />
        </template>
        <!-- 属地关联摄像机 -->
        <template v-if="isShudiEventDetail">
          <template
            v-for="(sdItem, index) in JSON.parse(orderData.relDeviceVo)"
          >
            <AlarmSopurceCamera
              :key="index"
              v-if="sdItem?.deviceCode"
              :device="sdItem"
              :showCollect="showCollect"
            />
          </template>
        </template>
      </template>
      <!-- AI上报 , 一键告警 , 摄像机告警 ， 第三方告警-->
      <template
        v-if="['1', '3', '4', '11'].indexOf(orderData.warningSource) > -1"
      >
        <alarm-row :value="orderData.deviceCode">
          <div style="display: flex" slot="label">
            <el-tooltip
              v-if="showCollect"
              content="收藏后可在实时视频的摄像机收藏列表中查看"
              placement="top-start"
              effect="dark"
              offset="10"
            >
              <i
                v-if="orderData.deviceCodeCollect == '1'"
                class="iconfont icon-yishoucang active"
                style="color: #ff6a6c"
                @click="collectDevice('0')"
              ></i>
              <i
                v-else
                class="iconfont icon-weishoucang1"
                style="color: #606266"
                @click="collectDevice('1')"
              ></i>
            </el-tooltip>
            <span>摄像机编号：</span>
          </div>
        </alarm-row>
        <alarm-row label="摄像机名称：" :value="orderData.deviceName" />
        <DeviceTags
          v-if="orderData?.deviceLabel?.length"
          :device-label="orderData.deviceLabel"
        ></DeviceTags>
        <alarm-row label="通道名称：" :value="orderData.channelName" />
        <alarm-row label="摄像机厂家：" :value="orderData.modelFactoryName" />
        <template v-if="isSingleColumn">
          <alarm-row
            label="摄像机挂高："
            :value="orderData.height ? orderData.height + 'm' : ''"
          />
          <alarm-row
            label="摄像机经纬度："
            :value="
              getLngLat(orderData.videoLongitude, orderData.videoLatitude)
            "
          />
        </template>
        <template v-else>
          <alarm-row
            label="摄像机经纬度："
            :value="
              getLngLat(orderData.videoLongitude, orderData.videoLatitude)
            "
          />
          <alarm-row
            label="摄像机挂高："
            :value="orderData.height ? orderData.height + 'm' : ''"
          />
        </template>
        <alarm-row
          label="摄像机地址："
          :value="orderData.deviceAddress || orderData.address"
          isSingle
        />
        <alarm-row
          label="置信度："
          :value="confidenceDegree"
          v-if="['1', '4'].includes(orderData.warningSource)"
        />
        <alarm-row
          :value="
            getHoriAzimuthAngle(horiAzimuthAngle) || orderData.horiAzimuthAngle
          "
          v-if="
            orderData.warningSource !== '11' &&
            showHorizontalAzimuth &&
            ((horiAzimuthAngle && getHoriAzimuthAngle(horiAzimuthAngle)) ||
              (orderData.horiAzimuthAngle &&
                orderData.horiAzimuthAngle !== 'N'))
          "
        >
          <template slot="label">
            <span>水平方位角</span>
            <el-tooltip
              effect="dark"
              placement="top"
              content="告警点到摄像机正北的水平方位角"
            >
              <i class="iconfont icon-tongyong-tianqiwenhao active"></i>
            </el-tooltip>
            <span>：</span>
          </template>
        </alarm-row>
        <div class="content" v-if="orderData.warningSource === '4'">
          <alarm-row
            label="是否二次研判："
            :value="orderData.isSecondJudge === '1' ? '是' : '否'"
          />
          <alarm-row
            label="二次研判结果："
            :value="getSecondJudgeResultLabel(orderData.secondJudgeResult)"
            v-if="orderData.isSecondJudge === '1'"
          />
        </div>
        <div
          class="content"
          v-if="orderData.warningSource === '1' && orderData.presetId"
        >
          <alarm-row label="预置位ID：" :value="orderData.presetId" />
          <alarm-row label="预置位名称：" :value="orderData.presetName" />
        </div>
      </template>
      <template v-if="['8', '9', '10'].includes(orderData.warningSource)">
        <div class="content">
          <alarm-row
            label="是否二次识别："
            :value="orderData.isSecondIdentify === '1' ? '是' : '否'"
            v-if="orderData.isSecondIdentify"
          />
          <template v-if="orderData.isSecondIdentify === '1'">
            <alarm-row
              label="二次识别结果："
              :value="getSecondJudgeResultLabel(orderData.secondIdentifyResult)"
            />
            <alarm-row label="联动算法：" :value="orderData.linkageAlgorithm" />
          </template>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { getQueryString } from "@/utils/common";
import CustomTitle from "../Title.vue";
import AlarmSopurceCamera from "./AlarmSopurceCamera.vue";
import { getTwoPointAngle } from "@/utils/countAngleDistance";
import DeviceTags from "@/components/eventManagement/infos/DeviceTags.vue";
import AlarmRow from "./AlarmRow.vue";
import { updatemonitorCollect } from "@/api/video/index.js";
import { getHoriAzimuthAngle } from "@/utils/countAngleDistance";
export default {
  name: "alarmSource",
  components: {
    CustomTitle,
    AlarmSopurceCamera,
    AlarmRow,
    DeviceTags,
  },
  props: {
    horiAzimuthAngle: {
      type: String | Number,
      default: "",
    },
    orderData: {
      type: Object,
      default: () => ({}),
    },
    selectDataSource: {
      type: Object,
      default: () => ({}),
    },
    positionMonitor: {
      type: Array,
      default: () => [],
    },
    hiddenTitle: {
      type: Boolean,
      default: false,
    },
    reldeviceData: {
      type: Object,
      default: () => ({}),
    },
    isSingleColumn: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    extraField() {
      // 卫星告警信息
      return this.orderData.extraField
        ? JSON.parse(this.orderData.extraField)
        : {};
    },
    confidenceDegree() {
      // 置信度
      return this.orderData.compConfidenceLevel
        ? this.orderData.compConfidenceLevel
        : this.orderData.confidenceLevel;
    },
    showHorizontalAzimuth() {
      // 是否显示水平方位角 告警事发地点使用站址地点，不显示水平方位角
      return (
        this.orderData.warningSource === "1" ||
        this.orderData.warningSource === "4"
      );
    },
    satelliteDeviceValue() {
      return (value) => {
        if (Object.keys(this.orderData.satelliteDevice).length == 0) {
          return "";
        }
        return this.orderData.satelliteDevice[value];
      };
    },
    radarDeviceValue() {
      return (value) => {
        if (Object.keys(this.orderData.radarDevice).length == 0) {
          return "";
        }
        return this.orderData.radarDevice[value];
      };
    },
    isShowRealTimeVideo() {
      return location.href.includes("/satelliteAlarm");
    },
    isRedarAlarm() {
      return this.orderData.warningSource === "10";
    },
    /**
     * @return {boolean} 是否展示联动摄像机
     */
    linkageDevices() {
      if (!this.reldeviceData) return false;
      if (Object.keys(this.reldeviceData).length === 0) return false;
      return true;
    },
    showCollect() {
      return (
        this.pageSource == "myEvent" ||
        this.pageSource == "eventManagement" ||
        this.pageSource == "leadDirection" ||
        this.pageSource == "myFavorites" ||
        "/eventManagement/recycleBin" == this.$route.path ||
        this.$route.path == "/recycleBinDetail" ||
        getQueryString("pageType") === "myFavorites"
      );
    },
    isShudiEventDetail() {
      return this.$route.path == "/territorialAlarm/eventQueryDetail";
    },
  },
  data() {
    return {
      pageSource: getQueryString("fromPageType"),
      getHoriAzimuthAngle,
      weipianList: ["4110101", "4110102", "4110103", "4110104"],
    };
  },
  methods: {
    getSecondJudgeResultLabel(value) {
      switch (value) {
        case "0":
          return "假";
        case "1":
          return "真";
        case "2":
          return "算法未分析";
        default:
          return "";
      }
    },
    // 返回经纬度
    getLngLat(lng, lat) {
      if (lng && lat) {
        lng = parseFloat(lng).toFixed(6);
        lat = parseFloat(lat).toFixed(6);
        return `${lng}，${lat}`;
      }
    },
    /**
     * 视频收藏
     */
    collectDevice(flag) {
      let param = {
        collObjType: "5",
        collObjCode: [this.orderData.deviceCode],
        optType: flag,
      };
      // 调用收藏接口
      updatemonitorCollect(param).then((res) => {
        if (res.code == 200) {
          const message = res.msg === "新增收藏成功" ? "收藏成功" : res.msg;
          $message.success(message);
          this.orderData.deviceCodeCollect = flag;
        } else {
          $message.error(res.msg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.alarm-source {
  .content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .single-column {
    /deep/ .row {
      width: 100%;
    }
    /deep/ audio {
      display: block;
    }
  }
}
@import "./AlarmSource.scss";
</style>
